<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/mui.min.css" rel="stylesheet" />
    <link href="../css/style.css" rel="stylesheet" />
    <style type="text/css" media="all">
    </style>
  </head>

  <body>
    <header class="mui-bar mui-bar-nav">
      <a v-on="tap:goTo({url:'app_list.html',id:'app_list'})" v-show="activeTab==='app.html'" class="mui-icon mui-icon-plus mui-pull-left"></a>
      <a v-on="tap: goTo({url:'./setting.html',id:'setting',showInTime:true})" class="mui-icon mui-icon-bars mui-pull-right"></a>
      <h1 id="title" class="mui-title" v-cloak>{{title||''}}</h1>
    </header>
    <nav id="main-nav" class="mui-bar mui-bar-tab">
      <a v-el="navs{{$index}}" v-class="mui-active:navIndex===$index" v-on="tap: openTab(nav,$index)" v-repeat="nav:navs" class="mui-tab-item" href="{{nav.href}}" v-cloak>
        <span class="{{nav.icons}}"><span v-show="nav.counter" class="mui-badge">{{nav.counter}}</span></span>
        <span class="mui-tab-label">{{nav.name}}</span>
      </a>
    </nav>
    <script src="../js/mui.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../app/vue-html5.js"></script>
    <script src="../app/x.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
      (function($, window, document, Vue) {
        window.vm = vm = new Vue.PageVm({
          el: 'body',
          name: 'page main',
          autoCloseWaiting: false,
          data: function() {
            var navs = localStorageJson('navs', [{
              name: "应用",
              icons: "mui-icon mui-icon-pengyouquan",
              href: "app.html"
            }]);
            return {
              navIndex: 0,
              activeTab: '',
              title: '',
              subpage_style: {
                top: '46px',
                bottom: '50px'
              },
              navs: navs,
              aniShow: {}
            };
          },
          plusReady: function() {
            vm.$currentWebView = plus.webview.currentWebview();
            this.preloadNavs();
            this.initBackBtn();
            plus.push.addEventListener("click", function(msg) {
              plus.push.clear();
            }, false);
          },
          events: {
            show: function(data) {
              var self = this;
              if (!this.activeTab) {
                vm.openTab(vm.navs[0]);
              }
              x.waitForValue(localStorage,'$webview:app.html:readyShow',function(){
                self.closeWaiting({info:'app readyShow'});
                self.showed();
              },3000,20);
            }
          },
          filters: {},
          methods: {
            preloadNavs: function() {
              var self = this;
              Vue.preload({
                timeout: 600
              }, {
                id: 'setting',
                url: './setting.html'
              });
              self.navs.forEach(function(nav, index) {
                var temp = {};
                var timeout = index == 0 ? 0 : 400;
                Vue.preload({
                  timeout: timeout,
                  callback: function(sub) {
                    vm.$currentWebView.append(sub);
                    if (index > 0) {
                      sub.hide();
                    } else {
                      temp[nav.href] = "true";
                      $.extend(self.aniShow, temp);
                    }
                  }
                }, {
                  id: nav.id||nav.href,
                  url: nav.href,
                  styles: self.subpage_style
                })
              });
            },
            initBackBtn: function() {
              $.oldBack = mui.back;
              var backButtonPress = 0;
              $.back = function(event) {
                backButtonPress++;
                if (backButtonPress > 1) {
                  plus.runtime.quit();
                } else {
                  plus.nativeUI.toast('再按一次退出应用');
                }
                setTimeout(function() {
                  backButtonPress = 0;
                }, 1000);
                return false;
              };
            },
            setNavIndex: function(pathValue) {
              setTimeout(function() {
                vm.$$.setting.classList.remove('mui-active');
                vm.navIndex = pathValue.value;
                vm.$$.navs[vm.navIndex].classList.add('mui-active');
              }, 500);
            },
            //选项卡点击事件
            openTab: function(nav, index) {
              this.navIndex = index;
              if (!nav) {
                nav = this.navs[index];
              }
              var self = this;
              if (nav.newPage) {
                return this.goTo(nav.href, nav.name);
              }
              var targetTab = nav.href;
              if (targetTab == self.activeTab) {
                return;
              }
              //更换标题
              this.title = nav.name;
              //显示目标选项卡
              if (mui.os.ios || this.aniShow[targetTab]) {
                plus.webview.show(targetTab);
              } else {
                var temp = {};
                temp[targetTab] = "true";
                mui.extend(self.aniShow, temp);
                plus.webview.show(targetTab, "fade-in", 300);
              }
              //隐藏当前;
              plus.webview.hide(this.activeTab);
              //更改当前活跃的选项卡
              this.activeTab = targetTab;
            },
          },
          mixins: []
        });
      })(mui, window, document, Vue);
    </script>
  </body>

</html>